<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQSlickWrap - Slick text wrapping for jQuery - Example 3</title>
        <meta http-equiv="X-UA-Compatible" content="chrome=1" />
        <meta name="author" content="Jason Feinstein"  />
        <meta name="description" content="jQSlickWrap is a plugin for jQuery which allows you to wrap content around irregularly shaped images, easily.  Use float and padding CSS styles to specify how the wrapping will work."/>
        <meta name="keywords" content="jquery,jqslickwrap,slickwrap,float,plugin,wrapping,sandbagging,sandbag,image,canvas,jasonwyatt,jason,feinstein, example,tutorial" />
        <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
        
        <link rel="stylesheet" media="all" href="./css/layout.css" type="text/css"/>
        <link rel="stylesheet" media="all" href="./css/index.css" type="text/css"/>
        
        <script src="./thirdparty/jquery-1.3.2.min.js" type="text/javascript" charset="UTF-8"></script>
        <script src="./js/jquery.slickwrap.js" type="text/javascript" charset="UTF-8"></script>
        
        <style type="text/css">
            .wrapReady {
                float: left;
                padding: 30px;
            }
        </style>
        
        <script type="text/javascript">
            $(document).ready(function(){
                $('.wrapReady').slickWrap({
                    bgColor: {              // use red as the background color
                        r: 255,
                        g: 0,
                        b: 0,
                        a: 255
                    },
                    cutoff: 10,             // let there be a tolerance of 10
                    resolution: 15,         // create divs of height 15
                    bloomPadding: false     // let's not use bloom
                });
            });
        </script>
    </head>
    <body>
        <h1>jQSlickWrap - Example 3</h1>
        <div class="container">
            <img class="wrapReady" src="./images/escalator.png" />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo massa, mattis in imperdiet in, pellentesque sit amet elit. Fusce vitae pulvinar nisi. Ut sed justo nec est congue cursus vestibulum eu dolor. Donec at mauris felis, sit amet ultrices odio. Aliquam erat volutpat. Nullam faucibus metus eu elit luctus sed malesuada risus molestie. Mauris nulla quam, tristique at lobortis at, fringilla quis nibh. Ut sapien mauris, imperdiet eget tincidunt semper, consectetur a augue. Donec vitae nibh augue, ut rhoncus elit. Nullam volutpat lorem sed odio lacinia non aliquet erat consequat. In ac libero turpis. In commodo nisl id diam dapibus varius. Sed lobortis ultricies ligula, quis auctor arcu imperdiet eget. Donec vel ipsum dui. In justo purus, molestie sit amet mattis sed, cursus non orci. Nullam ac massa vel tortor scelerisque blandit quis a sapien.</p>
            <p>Morbi ipsum massa, commodo in auctor a, tincidunt et nisl. In hac habitasse platea dictumst. Fusce molestie, leo ut pellentesque posuere, dui nunc dignissim massa, non aliquet felis sem nec nisl. In pellentesque condimentum tellus, sed hendrerit dolor porttitor vel. Nam dapibus urna a sem semper non porttitor nulla varius. Morbi libero metus, dictum vel viverra aliquet, fringilla vitae tellus. Maecenas ac libero mauris. Pellentesque vitae urna erat, lobortis venenatis ipsum. Ut nec gravida arcu. Suspendisse at risus nulla. Vivamus dictum tempus enim at pellentesque. Curabitur ac tellus ligula, non tristique risus. Nunc vitae ipsum nec libero consectetur tincidunt nec eu nisl. Fusce odio nisi, hendrerit nec aliquam in, dignissim et magna. Nullam tempor condimentum ligula vel cursus. Pellentesque ut sapien at ligula pellentesque congue ut ut turpis.</p>
        </div>
    </body>
</html>